<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单demo</title>
</head>
<body>
<div id="demo">
		<div class="text">
			<input type="text" id="" v-model="userName">
			<span>{{userName}}</span>	
		</div>
		<!--普通绑定开始-->
		<div class="checkbox">
			<input type="checkbox" id="checka" v-model="checkeda">
			<span>{{checkeda}}</span>
		</div>
		<!--多选框开始-->
		<div class="checkbox">
		 	<input type="checkbox" name="dataArry" value="arry1" id="arry1" v-model="dataArry">
		 	<label for="arry1">arry1</label>
		 	<input type="checkbox" name="dataArry" value="arry2" v-model="dataArry">
		 	<label>arry2</label>
		 	<input type="checkbox" name="dataArry" value="arry3" v-model="dataArry">
		 	<label>arry3</label>
		 	<div class="total">{{dataArry | json}}</div>	
		</div>
		<!--单选框开始-->
		<div class="radiobox">
			<input type="radio" name="radioselecst" value="男" v-model="sex">男
			<input type="radio" name="radioselecst" value="女" v-model="sex">女
			你的选择是{{sex}}
		</div>
		<!--select开始-->
		   <select v-model="selected">
				<option v-for="item in selectData" v-bind:value='item.value'>
					{{item.text}}
				</option>
		   </select>
			<span>{{selected | json}}</span>
</div>	
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
	(function(){
		 var vm = new Vue({
		 	el: "#demo",
		 	data:{
		 		selected: [],
		 		dataArry:[],
		 		sex:'女',
		 		selectData:[
			 		{'value':1,'text':'一'},
			 		{'value':2,'text':'二'},
			 		{'value':3,'text':'三'}
		 		]
		 	}
		 })
	})();
</script>
</html>